<script setup>
import { useUserInfoStore } from '@/store/userInfo'

// 用户信息状态
const userInfoStore = useUserInfoStore();

// 接收父组件传递过来的用户信息
let props = defineProps({
  userDetail: {
    type: Object,
    default: {}
  }
})
</script>

<template>
  <div class="user-center-header">
    <!-- 用户头像 -->
    <div class="user-center-header-l">
      <div class="user-avatar">
        <img v-if="userDetail.avatar" :src="userDetail.avatar" alt="">
        <img v-else src="../../assets/default_avatar.jpg" alt="">
      </div>
    </div>
    <!-- 用户简介 -->
    <div class="user-center-header-r">
      <div class="user-center-header-r-top">
        <div class="user-nickname">{{ userDetail.nickname }}</div>
        <div class="edit-info" v-if="userInfoStore.userInfo.userId == userDetail.userId">
          <router-link to="/user/settings/profile" class="user-update-info-btn">编辑信息</router-link>
        </div>
      </div>
      <div class="user-center-header-r-content">
        <ul>
          <li>
            <div class="statistics-num">{{ userDetail.postCount }}</div>
            <div class="statistics-name">发表文章数</div>
            <div class="statistics-bar"></div>
          </li>
          <li>
            <div class="statistics-num">{{ userDetail.likeCount }}</div>
            <div class="statistics-name">获赞数</div>
          </li>
        </ul>
      </div>
      <div class="user-center-header-r-bottom">
        <div class="user-join-time">加入云舟时间：{{ userDetail.joinTime }}</div>
        <div class="user-email">联系邮箱：{{ userDetail.email }}</div>
        <div class="user-desc">博客简介：{{ userDetail.personDescription }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 用户中心头部 */
.user-center-header {
  display: flex;
  background-color: #fff;
  padding: 0 20px 20px;
  border-radius: 5px;
}

/* 用户头像 */
.user-center-header .user-center-header-l {
  position: relative;
}

.user-center-header .user-center-header-l .user-avatar {
  position: absolute;
  top: -20px;
  width: 102px;
  height: 102px;
  border: 4px solid #f0f0f2;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-center-header .user-center-header-l .user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

/* 用户简介 */
.user-center-header .user-center-header-r {
  flex: 1;
  margin-left: 130px;
}

.user-center-header .user-center-header-r .user-center-header-r-top {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-center-header .user-center-header-r .user-center-header-r-top .user-nickname {
  color: #222226;
  font-size: 22px;
  font-weight: 700;
}

.user-center-header .user-center-header-r .user-center-header-r-top .edit-info .user-update-info-btn {
  border: 1px solid #ccccd8;
  color: #555666;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  width: 96px;
  text-align: center;
  height: 32px;
  border-radius: 20px;
}

.user-center-header .user-center-header-r .user-center-header-r-top .user-update-info-btn:hover {
  border-color: #555666;
}

/* 内容content */
.user-center-header .user-center-header-r .user-center-header-r-content {
  margin-bottom: 5px;
}

.user-center-header .user-center-header-r .user-center-header-r-content ul {
  display: flex;
  align-items: center;
}

.user-center-header .user-center-header-r .user-center-header-r-content ul li {
  display: flex;
  align-items: center;
}

.user-center-header .user-center-header-r .user-center-header-r-content .statistics-num {
  color: #222226;
  font-weight: 600;
  font-size: 20px;
  margin-right: 5px;
}

.user-center-header .user-center-header-r .user-center-header-r-content .statistics-name {
  color: #555666;
  font-size: 14px;
}

.user-center-header .user-center-header-r .user-center-header-r-content .statistics-bar {
  width: 1px;
  height: 16px;
  background: #e8e8ed;
  margin: 0 16px;
}

/* 底部bottom */
.user-center-header .user-center-header-r .user-center-header-r-bottom {
  font-size: 14px;
  color: #555666;
}

.user-center-header .user-center-header-r .user-center-header-r-bottom .user-join-time,
.user-center-header .user-center-header-r .user-center-header-r-bottom .user-email,
.user-center-header .user-center-header-r .user-center-header-r-bottom .user-desc {
  margin-bottom: 10px;
}
</style>